<template>
  <view>
    <scroll-view scroll-y :style="{height:height+'px'}" class="relative" :refresher-triggered="refresh" lower-threshold="100" refresher-enabled @scrolltolower="nextPage" @refresherrefresh="reload">
      <view v-if="list.length" class="padding-lr-30 padding-bottom-30">
        <view class="bg-white padding-30 container">
          <view v-for="(item, index) in list" :key="index" :class="{'margin-bottom-30':index !== list.length-1}" hover-class="card-hover" :hover-stay-time="70" @click="toDetail(item)">
            <l-title :title="item.type === 0 ? '支出费用' : '收入费用'" no-border>
              <view class="flex-row flex-center">
                <text class="text-30" :style="{color:color(item.status)}">{{ item.statusLabel }}</text>
                <text class="tbb-arrow-right text-28 flex-row flex-center" :style="{color:color(item.status)}" />
              </view>
            </l-title>
            <view class="card padding-tb-30">
              <order-info-item label="申请人" :value="item.createName" />
              <order-info-item label="申请摘要" :value="item.summary" />
              <order-info-item label="申请金额" :value="(item.type === 0 ? '-' : '') + item.paymentAmount+'元'" />
              <order-info-item label="备注" :value="item.remarks || '暂无'" />
              <order-info-item label="创建时间" :value="item.createTime" />
            </view>
          </view>
        </view>
        <l-footer :has-more="hasMore" />
      </view>
      <view v-else class="padding-lr-30 padding-bottom-30 flex-column" :style="{height:height+'px'}">
        <view class="relative bg-white padding-30 container flex-item">
          <l-no-data text="暂无数据" type="data" />
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import colors from '@/common/colors'
import OrderInfoItem from '../order-info-item/order-info-item'
import { pageDailyExpenditureBalance } from '@/common/api/order'
export default {
  name: 'RelatedFee',
  components: {
    OrderInfoItem
  },
  props: {
    height: {
      type: Number,
      default: 0
    },
    orderId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      list: [],
      page: 1,
      pageSize: 10,
      hasMore: true,
      refresh: false
    }
  },
  computed: {
    color() {
      return (status) => {
        switch (status) {
          case 0:
            return colors.colorPrimary
          case 1:
            return colors.colorSuccess
          case 2:
            return colors.colorError
          case 3:
            return colors.fontcolorT3
        }
      }
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    async getList() {
      const [err, res] = await pageDailyExpenditureBalance({
        current: this.page,
        size: this.pageSize,
        orderId: this.orderId
      })
      this.refresh = false
      if (!this.$http.errorCheck(err, res)) return false
      let orderList = res.data.data.records
      if (!orderList) orderList = []
      if (orderList.length < this.pageSize) this.hasMore = false
      if (this.page === 1) this.list = orderList
      else this.list.push(...orderList)
    },
    nextPage() {
      if (this.hasMore) {
        this.page++
        this.getList()
      }
    },
    reload() {
      this.refresh = true
      this.hasMore = true
      this.page = 1
      this.getList()
    },
    toDetail(e) {
      this.jump('/order/fee-detail/fee-detail?id=' + e.id + '&approvalName=' + e.approvalName)
    }
  }
}
</script>

<style scoped lang="scss">
.card{
  background:#f7f7f7;
}
.container{
  border-radius:0 0 14rpx 14rpx;
  overflow: hidden;
}
</style>
